<script setup lang="ts">
import { ref, defineEmits, watch } from "vue";
import { Checkbox } from "vant";
const checked = ref(false);
// return { checked };
let propsData = defineProps<{
  isdisabled: boolean;
}>();
const updatedisabled = ref();
const emits = defineEmits<{ (e: "getCheckValues", check: boolean): void }>();

watch(
  () => propsData.isdisabled,
  (newVal, oldVal) => {
    updatedisabled.value = newVal;
  },
  { immediate: true }
);
function agreeChange(val: boolean) {
  emits("getCheckValues", val);
}
</script>
<template>
  <div class="agreement-box">
    <Checkbox v-model="checked" @change="agreeChange"
      >同意 <slot class="blue-font"></slot
    ></Checkbox>
  </div>
</template>

<style lang="scss" scoped>
.agreement-box {
  padding: 20px;
  .blue-font {
    color: #1677ff;
    margin-left: 5px;
  }
  ::v-deep .van-checkbox {
    font-size: 14px;
  }
}
</style>
